<template>
  <!-- 机票订单-表单组件 -->
  <div class="main">
    <!-- 1.乘机人 -->
    <div class="air-column">
      <h2>乘机人</h2>
      <!-- elm表单I -->
      <el-form ref="userForm" class="member-info" :model="{users}">
        <div class="member-info-item" v-for="(item,index) in users" :key="index">
          <el-form-item
            label="乘机人类型"
            :prop="`users[${index}].username`"
            :rules="[{required:true,message:'请输入用户名',trigger:'blur'},{
              min:2,message:'请输入正确的用户名',trigger:'blur'
            }]"
          >
            <el-input v-model="item.username" placeholder="姓名" class="input-with-select">
              <!-- 下拉框 -->
              <el-select slot="prepend" value="1" placeholder="请选择">
                <el-option label="成人" value="1"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <el-form-item
            label="证件类型"
            :prop="`users[${index}].id`"
            :rules="[{required:true,message:'请输入身份证',trigger:'blur'},{
              min:18,message:'身份证是18位数',trigger:'blur'
            }]"
          >
            <el-input v-model="item.id" placeholder="证件号码" class="input-with-select">
              <el-select slot="prepend" value="1" placeholder="请选择">
                <el-option label="身份证" value="1" :checked="true"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <!-- 删除乘机人 -->
          <span class="delete-user" @click="handleDeleteUser(index)">-</span>
        </div>
      </el-form>
      <el-button type="primary" class="add-member" @click="handleAddUsers">添加乘机人</el-button>
    </div>

    <!-- 2.保险 -->
    <div class="air-column">
      <h2>保险</h2>
      <!-- 多选框组 -->
      <el-checkbox-group v-model="insuranceList">
        <div>
          <div class="insurance-item" v-for="(item,index) in data.insurances" :key="index">
            <el-checkbox
              :label="item.id"
              border
            >{{`${item.type}: ￥${item.price}/份x${users.length} 最高赔付${item.compensation}`}}</el-checkbox>
          </div>
        </div>
      </el-checkbox-group>
    </div>

    <!-- 3.联系人 -->
    <div class="air-column">
      <h2>联系人</h2>
      <div class="contact">
        <!-- elm表单II -->
        <el-form
          ref="contactForm"
          label-width="80px"
          :rules="rules"
          :model="{
          contactName,contactPhone,captcha
        }"
        >
          <el-form-item label="姓名" prop="contactName">
            <el-input v-model="contactName"></el-input>
          </el-form-item>

          <el-form-item label="手机" prop="contactPhone">
            <el-input v-model="contactPhone" placeholder="请输入内容">
              <template slot="append">
                <el-button @click="handleSendCaptcha">发送验证码</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="captcha">
            <el-input v-model="captcha"></el-input>
          </el-form-item>
        </el-form>

        <!-- 引入登录组件 -->
        <h2 v-if="!$store.state.user.userInfo.token">请先登录/注册</h2>
        <!-- 表单头部 -->
        <el-row
          type="flex"
          justify="center"
          class="tabs"
          v-show="!$store.state.user.userInfo.token"
        >
          <span
            v-for="(item,index) in ['登录','注册']"
            :key="index"
            :class="{active:currentTab==index}"
            @click="hanleChangeTab(index)"
          >{{item}}</span>
        </el-row>
        <!-- 登录组件 -->
        <loginPage v-if="currentTab==0" v-show="!$store.state.user.userInfo.token" />
        <!-- 注册组件 -->
        <registerPage
          @cut="currentTab=0"
          v-show="!$store.state.user.userInfo.token"
          v-if="currentTab==1"
        />
        <!-- 提交订单 -->
        <el-button
          v-if="$store.state.user.userInfo.token"
          type="warning"
          class="submit"
          @click="handleSubmit"
        >提交订单</el-button>
      </div>
      <!-- 计算总计的计算属性 -->
      <div>{{totalCalPrice}}</div>
    </div>
  </div>
</template>

<script>
//1.登录组件
import loginPage from "@/components/user/loginPage";
//2.引入注册组件
import registerPage from "@/components/user/registerPage";
export default {
  components: {
    loginPage,
    registerPage
  },
  props: {
    //接收父传子的数据
    data: {
      type: Object,
      default: {}
    }
  },
  computed: {
    totalCalPrice() {
      let num = 0;
      //1.座位费
      if (this.data.seat_infos) {
        num += this.users.length * this.data.seat_infos.par_price;
        //2.机建+燃油费
        num += this.users.length * this.data.airport_tax_audlet;

        //3.保险费
        this.data.insurances.forEach(elm => {
          if (this.insuranceList.indexOf(elm.id) >= 0) {
            num += elm.price * this.users.length;
          }
        });
        this.$emit("setAllPrice", num);
      }
    }
  },

  //需要提交的数据
  data() {
    return {
      currentTab: 0,
      //乘机人
      users: [
        {
          username: "",
          id: ""
        }
      ],
      //保险数据
      insuranceList: [],
      //联系人姓名
      contactName: "",
      //联系人电话
      contactPhone: "",
      //验证码
      captcha: "",
      //总价钱
      totalPrice: "",
      //表单II校验规则
      rules: {
        contactName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
          { min: 2, max: 4, message: "请输入正确的用户名", trigger: "blur" }
        ],
        contactPhone: [
          { required: true, message: "请输入手机", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      }
    };
  },
  //方法
  methods: {
    //1.删除乘机人
    handleDeleteUser(index) {
      this.users.splice(index, 1);
      // console.log(index);
    },
    //2.添加乘机人
    handleAddUsers() {
      this.users = [...this.users, { username: "", id: "" }];
    },

    //3.发送验证码
    handleSendCaptcha() {
      //判断手机输入是否为空
      if (!this.contactPhone || this.contactPhone.length != 11) {
        this.$message.error("请输入正确手机号码");
        return;
      }
      //获取验证码数据
      this.$axios({
        url: "/captchas",
        method: "post",
        data: { tel: this.contactPhone }
      }).then(res => {
        if (res.data.code == "000000") {
          this.$message.success("验证码： " + res.data.code);
        }
      });
    },

    //4.提交订单
    async handleSubmit() {
      //全局校验表单是否正确
      let userForm = await this.$refs.userForm.validate().catch(err => {});
      let contactForm = await this.$refs.contactForm
        .validate()
        .catch(err => {});

      if (userForm && contactForm) {
        let data = {
          users: this.users,
          insurances: this.insuranceList,
          contactName: this.contactName,
          contactPhone: this.contactPhone,
          invoice: false,
          seat_xid: this.$route.query.seat_xid,
          air: this.$route.query.id,
          captcha: this.captcha
        };
        //生成订单
        this.$message.success("正在生成订单");
        this.$axios({
          url: "/airorders",
          method: "post",
          data: data,
          headers: {
            Authorization: "Bearer " + this.$store.state.user.userInfo.token
          }
        }).then(res => {
          // console.log(res.data);
          if (res.data.message == "订单提交成功") {
            //跳出提交成功提示
            this.$message.success("订单提交成功");
            //跳转到付款页面
            this.$router.push("/air/pay?id=" + res.data.data.id);
          }
        });
      }
    },
    //5.修改当前登录注册选项
    hanleChangeTab(index) {
      //修改当前data数据里面的当前选项
      this.currentTab = index;
    }
  }
};
</script> 

<style lang="less" scoped>
.main {
  .ari-column {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ddd;
  }
  .ari-column h2 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: normal;
  }
  /deep/ .el-select .el-input {
    width: 160px;
  }
  /deep/ .el-form-item_lable {
    width: 100px;
    padding: 0 10px;
  }
  .input-with-select {
    width: 590px;
  }

  .member-info /deep/ .el-form-item {
    margin-bottom: 0;
    padding-left: 20px;
    margin-top: 20px;
  }
  .member-info-item {
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;

    &:first-child {
      .delete-user {
        display: none;
      }
    }
  }

  .add-member {
    margin-top: 20px;
  }
  .delete-user {
    position: absolute;
    top: 50%;
    right: -30px;
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    border-radius: 50px;
    background: #ddd;
  }
  //保险
  .insurance {
    > div {
      margin-top: 10px;
    }
  }
  .insurance-item {
    margin-bottom: 20px;
  }
  //联系人
  .contact {
    > h2 {
      margin: 0;
    }
    /deep/ .el-input {
      width: 60%;
      margin-left: 2px;
      margin-top: 4px;
    }
  }
  .submit {
    display: block;
    margin: 50px auto;
    width: 250px;
    height: 50px;
  }
  //登录注册

  /deep/.tabs {
    width: 330px;
    span {
      display: inline-block;
      width: 330px;
      height: 50px;
      line-height: 48px;
      box-sizing: border-box;
      border-top: 2px solid #eee;
      text-align: center;
      cursor: pointer;
      color: #666;
    }
    .active {
      color: orange;
      border-top-color: orange;
      background: #eee;
      font-weight: 700;
    }
  }
}
</style>